﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta charset="utf-8" />
    <title>XBox</title>
    <script src="scripts/kendo/jquery.min.js"></script>
    <script src="XBox/XBox.js"></script>
    <script src="XBox/XBox.viewer.js"></script>
    <script src="XBox/XBox.form.js"></script>
    <script src="XBox/XBox.component.js"></script>
    <script src="scripts/kendo/jszip.min.js"></script>
    <script src="scripts/kendo/kendo.all.min.js"></script>
    <script src="scripts/kendo/kendo.aspnetmvc.min.js"></script>
    <script src="scripts/kendo/kendo.modernizr.custom.js"></script>
    <script src="scripts/kendo/cultures/kendo.culture.zh-CN.min.js"></script>
    <script src="scripts/kendo/messages/kendo.messages.zh-CN.min.js"></script>

    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/XBox.ui.css" />

    <link name="theme-common" rel="stylesheet"
          href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
    <link name="theme" rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css">
</head>
<body>
    <div class="header">
        <div style="margin: 15px auto; text-align: center; ">
            <span style="font-size: 20px; font-weight: bolder;">XBox使用示例及API说明</span>
            <div class="themepanel"></div>
            <div class="paytoqrcode">
                <img src="images/qrcode.png" height="322" width="322" />
                <span style="display: block;font-weight: bold;">请使用支付宝打赏</span>
            </div>
            <div class="systool">
                <a class="themeselect" href="javascript:void(0)">皮肤选择</a>
                <a class="paytome" href="javascript:void(0)">打赏</a>
                <a class="version" href="javascript:void(0)">v1.0.0</a>
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="left"></div>
        <div class="main">
            <div class='tabstrip'>
                <ul class="tabmenu"></ul>
            </div>
        </div>
    </div>
    <div class="footer"></div>
    <script type="text/javascript">
        kendo.culture("zh-CN");
        $(document.body).ready(function () {
            XBox.App = XBox.Application.create("Example", {
                basePath: "modules/",
                container: ".main .tabstrip:first"
            }, function () {
                this.openPage = function (name) {
                    var page = this.pages[name];
                    if (!page) {
                        var tabcontent = $("<div class='k-content'></div>");
                        $(this.container).append(tabcontent);
                        this.pageManager.append([{
                            text: this.viewers[name].title,
                            content: tabcontent
                        }]);

                        var thisli = $(this.container).find(".tabmenu>li:last").attr("name", name);
                        if (name !== "form.api") {
                            thisli.append('<span class="k-icon k-i-close"></span>');
                        }

                        page = this.viewers[name].create({ container: tabcontent });
                    }

                    this.pageManager.select("li[name='" + name + "']");

                    page.name = name;
                    this.pages[name] = page;
                }

                this.pageManager = $(this.container).kendoTabStrip({
                    activate: function (e) {
                        if ($(e.item).is(":visible")) {
                            this.selectItem = $(e.item);
                        }
                    }
                }).data("kendoTabStrip");

                var close = function (app, pm) {
                    return function () {
                        var li = $(this).closest("li");
                        li.hide();
                        pm.remove(li);
                        delete app.pages[li.attr("name")];
                        var cl = $(pm.selectItem).not(li);
                        if (cl.length === 0) {
                            cl = pm.element.find(".tabmenu>li:first");
                        }
                        if (cl.length === 0) {
                            pm.select(0);
                        } else {
                            pm.select(cl);
                        }
                        return false;
                    }
                };

                $(this.container).delegate(".tabmenu > li > span.k-icon.k-i-close", "click", close(this, this.pageManager));
            });


            XBox.define("menu", {
                container: $(".middle .left"),
                templates: {
                    main: [
                        '<ul class="mainmenu">' +
                        '   <% for(var i=0; i < data.length; i++) { %>' +
                        '       <% if(data[i].items){%>' +
                        '           <li class="menu"><span><%= data[i].name %></span><ul>' +
                        '               <% for(var k=0; k < data[i].items.length; k++) { %>' +
                        '                   <li class="submenu">' +
                        '                       <a href="javascript:void(0)" data-url="<%=data[i].items[k].hash%>">' +
                        '                           <%= data[i].items[k].name %>' +
                        '                       </a>' +
                        '                   </li>' +
                        '               <% } %>' +
                        '           </ul></li>' +
                        '       <% }else{%>' +
                        '           <li class="menu"><a href="javascript:void(0)" data-url="<%=data[i].hash%>">' +
                        '                <%= data[i].name %>' +
                        '           </a></li>' +
                        '       <%}%>' +
                        '   <% } %>' +
                        '</ul>'
                    ]
                },
                delegates: {
                    ".mainmenu li>a": function (target, e) {
                        var hash = $(target).data("url");
                        if (hash) {
                            XBox.App.route(hash);
                        }
                    },
                },
                mainTplData: function () {
                    var menus = [
                        {
                            name: "表单",
                            items: [
                                { name: "html表单", hash: "form.html" },
                                { name: "kendo表单", hash: "form.kendo" },
                                { name: "复合表单", hash: "form.complex" },
                                { name: "简单点", hash: "form.sosimple" }
                            ]
                        }, {
                            name: "列表",
                            items: [
                                { name: "简单列表", hash: "grid.simple" },
                                { name: "webapi列表示例", hash: "grid.page" },
                                { name: "json列表示例", hash: "grid.crud" },
                                { name: "官网的示例", hash: "grid.page2" }
                            ]
                        }, {
                            name: "Kendo",
                            items: [
                                { name: "Notification", hash: "kendo.notify" },
                                { name: "Window", hash: "kendo.window" },
                            ]
                        }, {
                            name: "XBox.form API", hash: "form.api"
                        }];
                    return menus;
                },
                afterRender: function () {
                    var mainmenu = this.container.find("ul.mainmenu");
                    var bar = mainmenu.kendoPanelBar({ expandMode: "single" }).data("kendoPanelBar");
                    bar.expand(mainmenu.find("li.menu:first()"));
                }
            });

            XBox.define("theme", {
                container: $(".header .themepanel"),
                templates: {
                    main: [
                        '<ul class="themes">' +
                        '    <% for(var i=0; i < data.length; i++) { %>' +
                        '        <li class="theme">' +
                        '            <span class="tc-color" style="background-color: <%= data[i][0]%>"></span>' +
                        '            <span class="tc-color" style="background-color: <%= data[i][1]%>"></span>' +
                        '            <span class="tc-color" style="background-color: <%= data[i][2]%>"></span>' +
                        '            <span class="tc-name" <% if(data[i][4]){ %> data-common="<%= data[i][4]%>"<% } %>><%= data[i][3]%></span>' +
                        '        </li>' +
                        '   <% } %>' +
                        '</ul>'
                    ]
                },
                mainTplData: function () {
                    var themes = [
                        ["#0167cc", "#4698e9", "#272727", "Black"],
                        ["#076186", "#7ed3f6", "#94c0d2", "BlueOpal"],
                        ["#3276b1", "#67afe9", "#ffffff", "Bootstrap", "Bootstrap"],
                        ["#ef6f1c", "#e24b17", "#5a4b43", "Default"],
                        ["#007cc0", "#e6f2f9", "#f0f0f0", "Fiori", "Fiori"],
                        ["#363940", "#2eb3a6", "#ffffff", "Flat"],
                        ["#b11e9c", "#880275", "#1b141a", "HighContrast"],
                        ["#3f51b5", "#283593", "#ffffff", "Material", "Material"],
                        ["#3f51b5", "#1c1c1c", "#4d4d4d", "MaterialBlack", "Material"],
                        ["#8ebc00", "#787878", "#ffffff", "Metro"],
                        ["#00aba9", "#0e0e0e", "#565656", "MetroBlack"],
                        ["#ee9f05", "#40444f", "#212a33", "Moonlight"],
                        ["#ff4350", "#00acc1", "#303553", "Nova", "Nova"],
                        ["#0072c6", "#cde6f7", "#ffffff", "Office365", "Office365"],
                        ["#298bc8", "#515967", "#eaeaec", "Silver"],
                        ["#666666", "#cccccc", "#ffffff", "Uniform"]];
                    return themes;
                },
                delegates: {
                    ".themes .theme": function (target, e) {
                        var name = $(target).find(".tc-name").html().toLowerCase();
                        $("link[name=theme]").attr("href", "http://kendo.cdn.telerik.com/2017.2.504/styles/kendo." + name + ".min.css");
                        var common = $(target).find(".tc-name").data("common") || "";
                        if (common) {
                            common = "-" + common.toLowerCase();
                            $("link[name=theme-common]").attr("href", "http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common" + common + ".min.css");
                        }
                    }
                },
                afterRender: function () {
                    var show = function (selector) {
                        var div = $(selector);
                        if (div.find("span.div-close").length === 0) {
                            div.append('<span class="k-icon k-i-close div-close"></span>');
                            (function (div) {
                                div.find("span.div-close").click(function () {
                                    div.hide();
                                });
                            })(div);
                        }
                        div.show();
                    }
                    $(".header .themeselect").click(function () {
                        show(".header .themepanel");
                    });
                    $(".header .paytome").click(function () {
                        show(".header .paytoqrcode");
                    });
                }
            });


            XBox.App.viewers.menu.create();
            XBox.App.viewers.theme.create();
            XBox.App.route("form.api");
        });
    </script>
</body>
</html>